import createdName from '../../../../utils/createdName';
export default {
  name: createdName('Switch'),
  props: {
    value: {
      type: Boolean,
      default: false,
      note: '是否开启，默认false'
    },
    disabled: {
      type: Boolean,
      default: false,
      note: '是否禁用'
    },
    width: {
      type: String | Number,
      default: null,
      note: 'switch 的宽度（像素）'
    },
    'active-icon-class': {
      type: String,
      default: '',
      note: 'switch 打开时所显示图标的类名，设置此项会忽略 active-text'
    },
    'inactive-icon-class': {
      type: String,
      default: '',
      note: 'switch 关闭时所显示图标的类名，设置此项会忽略 inactive-text'
    },
    'active-text': {
      type: String,
      default: '',
      note: 'switch 打开时的文字描述'
    },
    'inactive-text': {
      type: String,
      default: '',
      note: 'switch 关闭时的文字描述'
    },
    'active-value': {
      type: String | Boolean | Number,
      default: true,
      note: 'switch 打开时的值'
    },
    'inactive-value': {
      type: String | Boolean | Number,
      default: false,
      note: 'switch 关闭时的值'
    },
    'active-color': {
      type: String,
      default: '#409EFF',
      note: 'switch 打开时的背景色'
    },
    'inactive-color': {
      type: String,
      default: '#C0CCDA',
      note: 'switch 关闭时的背景色'
    },
    'name': {
      type: String,
      default: '',
      note: 'switch 对应的 name 属性'
    },
    'validate-event': {
      type: Boolean,
      default: true,
      note: '改变 switch 状态时是否触发表单的校验'
    }
  },
  data () {
    return {
      bool: false
    }
  },
  render (h) {
    const _self = this;
    _self.bool = _self.value
    return h('div', {
      class: ['form-switch', _self.value && 'is-checked'],
      on: {
        click () {
          _self.bool = !_self.bool;
          _self.$emit('input', _self.bool)
        }
      }
    }, [
      h('input', {
        attrs: {
          type: 'checkbox'
        },
        class: 'form-switch__input',
        domProps: {
          value: _self.bool,
        },
        on: {
          change () {
            _self.$emit('change', _self.bool)
          }
        }
      }),
      _self.inactiveText && h('span', {
        class: ['form-switch__label', ' form-switch__label--left', !_self.bool && 'is-active']
      }, _self.inactiveText),
      h('span', {
        class: ['form-switch__core']
      }),
      _self.activeText && h('span', {
        class: ['form-switch__label', ' form-switch__label--right', _self.bool && 'is-active']
      }, _self.activeText),
    ])
  }
}